<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">

  <link href="/css/phylotree.css" rel="stylesheet">

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
  <script src="/js/jspdf.debug.js"></script>
  <script src="/js/saveSvgAsPng.js"></script>
  <script src="/js/jquery.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/d3.v3.min.js"></script>
  <script src="/js/underscore-min.js"></script>
  <!-- <script src="/phylotree.min.js"></script> -->

</head>

<body>
  <!-- <div class="chart-warp" style="width:1000px;height:1000px;overflow:auto;"> 滚动条-->
  <div class="chart-warp">
    <!-- 图形部分 -->
    <div id="svg-box">
      <!-- <svg id="chart_svg" width="1000" height="1000"> -->
      <svg id="chart_svg">
        <!-- legend -->
        <g id="chart_l"></g>
        <!-- tree -->
        <g id="chart_g"></g>
      </svg>
    </div>
    <!-- 右击菜单 -->
    <ul id="right_click_menu" class="dropdown-menu">
      <li id="reset"><a tabindex="-1">重置所有内容</a></li>
      <li id="prev-step"><a tabindex="-1">上一步操作</a></li>
      <li id="next-stept"><a tabindex="-1">下一步操作</a></li>
      <li class="divider"></li>
      <li id="tip_left"><a tabindex="-1">左对齐</a></li>
      <li id="tip_right"><a tabindex="-1">右对齐</a></li>
      <li class="divider"></li>
      <li id="sort_original"><a tabindex="-1">默认布局</a></li>
      <li id="sort_descending"><a tabindex="-1">升序布局</a></li>
      <li id="sort_ascending"><a tabindex="-1">倒叙布局</a></li>
      <li class="divider"></li>
      <li id="save-img-pdf"><a tabindex="-1">导出图片（.pdf）</a></li>
      <li id="save-img-jpg"><a tabindex="-1">导出图片（.jpg）</a></li>
      <li id="save-file-svg"><a tabindex="-1">导出文件（.svg）</a></li>
      <li id="save-file"><a tabindex="-1">导出文件（.tree）</a></li>
    </ul>

    <!-- 添加分支 -->
    <div class="modal-wrap" id="modal-input-wrap" style="display: none;">
      <div class="modal-box">
        <div class="modal-title">
          <span>添加新分支</span>
        </div>
        <div class="list">
          <span>分支名称：</span>
          <input type="text" class="input-name">
        </div>
        <div class="list">
          <span>分支长度：</span>
          <input type="text" class="input-length">
        </div>
        <div class="modal-button">
          <button class="ok">确定</button>
          <button class="no">取消</button>
        </div>
      </div>
    </div>

    <!-- 编辑新分支 -->
    <div class="modal-wrap" id="modal-textarea-wrap" style="display: none;">
      <div class="modal-box" style="width: 480px;">
        <div class="modal-title">
          <span>编辑全部分支</span>
        </div>
        <div class="list">
          <textarea id="nwk_spec" placeholder="例如：(A:0.12,B:0.260,C:0.260)0.021:0.169" rows="6" selectionstart="1"
            selectionend="1"></textarea>
        </div>
        <div class="modal-button">
          <button class="ok">确定</button>
          <button class="no">取消</button>
        </div>
      </div>
    </div>
    <!-- loading -->
    <div class="loading-box" v-show="isLoading">
      <img src="/img/loading.gif" />
    </div>
  </div>

  <!-- <script src="./data.js"></script>  -->
  <script src="./dataOld.js"></script>
  <script src="/phylotree.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>